import React from 'react';
import './index.scss';

import styled from 'styled-components';


const Title = styled.h1`
    font-size: 1.5em;
    text-align: center;
    color: palevioletred;
`;

const Wrapper = styled.section`
    padding: 4em;
    background: papayawhip;
`;


const Button = styled.button`
    background: ${props => props.primary ? 'palevioletred' : 'white'};
    color: ${props => props.primary ? 'white' : 'palevioletred'};
    font-size: 1em;
    margin: 1em;
    padding: 0.25em 1em;
    border: 2px solid palevioletred;
    border-radius: 3px;
`

// 传递className 在react-native 中要使用 style
const Link = ({ className, children }) => (
    <a className={className}>
        {children}
    </a>
)

const StyledLink = styled(Link)`
    color: palevioletred;
    padding:3px 10px;
`

const LinkButton = Button.withComponent('a')


const Buttonabc = styled.button`
    color: palevioletred;
    font-size: 1em;
    margin: 1em;
    padding: 0.25em 1em;
    border: 2px solid palevioletred;
    border-radius: 3px;
`;
const TomatoButton = styled(Buttonabc)`
    color: tomato;
    border-color: tomato;
`;
// TomatoButton 部分样式继承自 Button 这种情况下不会生成两个class


class Login extends React.Component {

    render() {
        return (
            <div className="page_view_container login-view">
                <Wrapper>
                    <Title>Hello styled-components</Title>
                    <Button>Normal</Button>
                    <Button primary>Primary</Button>
                    <LinkButton>withComponent</LinkButton>
                    <Link>普通组件</Link>
                    <StyledLink>有颜色吗？</StyledLink>
                    <TomatoButton>345</TomatoButton>
                </Wrapper>

            </div>
        );
    }
}
export default Login;